<template>
  <div class="gd-map">
    <div class="map-container" ref="mapContainer"></div>
  </div>
</template>

<script>
const AMap = window.AMap

export default {
  props: {
    mapConf: {
      type: Object,
      default: () => ({
        center: [116.397405, 39.909292],
        zoom: 14
      })
    }
  },

  mounted () {
    this.InitMap()
  },

  beforeDestroy () {
    this.amap.clearMap()
    this.amap.destroy()
  },

  methods: {
    InitMap () {
      const { mapContainer } = this.$refs
      const map = new AMap.Map(mapContainer, {
        center: this.mapConf.center,
        zoom: this.mapConf.zoom,
        showIndoorMap: false, // 关闭室内地图
        mapStyle: 'amap://styles/b656af3ffccd08e506cb27c36b43ee0e'
      })

      map.plugin(['AMap.Scale', 'AMap.ToolBar'], function () {
        var scale = new AMap.Scale()
        map.addControl(scale)

        var toolBar = new AMap.ToolBar({
          position: 'RB',
          direction: true
        })
        map.addControl(toolBar)
      })

      this.amap = map
    }
  }
}
</script>

<style lang="less" scoped>
.gd-map {
  position: relative;
  height: 100%;
  .map-container {
    height: 100%;
  }
}
</style>
